<script setup>

import { reactive, watch, defineEmits } from 'vue'

const sortParams = reactive({
  inventory: false, // 是否有库存
  onlyDiscount: false, // 是否只显示特惠
  sortField: null, // [publishTime最新,orderNum人气,price价格,evaluateNum评论]
  sortMethod: 'desc'
})

const changeSort = (type) => {
  sortParams.sortField = type
  if (type === 'price') {
    sortParams.sortMethod = (sortParams.sortMethod === 'asc') ? 'desc' : 'asc'
  } else {
    sortParams.sortMethod = 'desc'
  }
//   console.log(sortParams.sortField, sortParams.sortMethod)
}

// 监听事件的变化
const emit = defineEmits(['sortChange'])
watch(sortParams, () => {
  emit('sortChange', sortParams)
}, { deep: true })
</script>
<template>
    <div class="sub-sort">
       <div class="sort">
        <a href="javascript:;" @click="changeSort(null)" :class="{active:sortParams.sortField===null}">默认排序</a>
        <a href="javascript:;"  @click="changeSort('publishTime')" :class="{active:sortParams.sortField==='publishTime'}">最新商品</a>
        <a href="javascript:;" @click="changeSort('orderNum')" :class="{active:sortParams.sortField==='orderNum'}">最高人气</a>
        <a href="javascript:;" @click="changeSort('evaluateNum')" :class="{active:sortParams.sortField==='evaluateNum'}">评论最多</a>
        <a href="javascript:;" @click="changeSort('price')" >价格
            <i class="arrow up" :class="{active:sortParams.sortMethod==='asc'}"></i>
            <i class="arrow down" :class="{active:sortParams.sortMethod==='desc'}"></i>
        </a>
       </div>
       <div class="check">
        <checkbox v-model="sortParams.inventory">仅显示有货商品</checkbox>
        <checkbox v-model="sortParams.onlyDiscount">仅显示特惠商品</checkbox>

       </div>
    </div>
</template>
<style scoped lang="less">
.sub-sort{
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .sort{
        display: flex;
        a{
            height: 30px;
            line-height: 28px;
            border: 1px solid #e4e4e4;
            padding: 0 20px;
            color: #999;
            border-radius: 2px;
            position: relative;
            transition: all .3s;
            &.active{
                background-color: @xtxColor;
                border-color:@xtxColor ;
                color: #fff;
            }
            .arrow{
                position: absolute;
                border: 5px solid transparent;
                right: 8px;
                &.up{
                    top:3px;
                    border-bottom-color: #bbb;
                    &.active{
                        border-bottom-color:@xtxColor ;
                    }
                }
                &.down{
                    top: 15px;
                    border-top-color: #bbb;
                    &.active{
                        border-top-color: @xtxColor;
                    }
                }
            }
        }
    }
}
// .check{
//     [type=checkbox]{
//         margin-left: 20px;
//         color: #999;
//         outline: blue;
//         border: 1px solid red;
//         -webkit-appearance: button !important;
//     }
// }
</style>
